{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_form_row,render_field %}
{% block title %}主页{% endblock %}
​{% block body %} 
<script type="text/javascript">
	$(document).ready(function(){
		$(".pohai").click(function(){
			var id=this.id
			$.post("/persecute?uid="+id,function(data,status){
				if (status=="success")
					$("#"+id).html("迫害成功，共"+data+"次");
				else
					$("#"+id).html("迫害失败:"+status);
				setTimeout('$("#'+id+'").html("迫害")',1500);
			})
		})
	})
	var d=[];
	var x=[];
</script>
			<p style="text-align: center;">
				 <strong>今日共{{v}}条消息，以下是龙王榜</strong>
			</p>
			<p style="text-align: center;">
				 点击条数后面的迫害迫害用户！
			</p>
			<a href="https://greasyfork.org/zh-CN/scripts/405381-%E7%8A%87%E7%8A%87%E7%88%AC%E8%99%AB%E8%BE%85%E5%8A%A9" style="text-align: center;">
				点击这里安装插件获得更好的体验。
			</a>
			<table class="ui celled table" style="text-align: center;">
				<thead>
					<tr>
						<th>
							排名
						</th>
						<th>
							uid
						</th>
						<th>
							username
						</th>
						<th>
							犇犇条数
						</th>
						<th>
							迫害
						</th>
					</tr>
				</thead>
				<tbody>
				{% for i in b %}
					<script type="text/javascript">
			            d.push( "{{i.username}}");
			            x.push( "{{i.count}}");
			        </script>
					<tr>
						<td>
							{% if loop.index==1 %}
								<svg t="1588329338352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1118" width="20" height="20"><path d="M824.891164 113.777778V28.444444a28.444444 28.444444 0 0 0-28.444444-28.444444H227.557831a28.444444 28.444444 0 0 0-28.444444 28.444444v85.333334H0.002276v227.555555a256 256 0 0 0 232.96 256A312.888889 312.888889 0 0 0 455.113387 762.595556V910.222222l-113.777778 113.777778h341.333333l-113.777778-113.777778v-147.626666A312.888889 312.888889 0 0 0 791.042276 597.333333 256 256 0 0 0 1024.002276 341.333333V113.777778zM113.780053 341.333333V227.555556h85.333334v244.337777A142.222222 142.222222 0 0 1 113.780053 341.333333z m796.444445 0a142.222222 142.222222 0 0 1-85.333334 130.56V227.555556h85.333334z" p-id="1119" fill="#FFD700"></path></svg>
							{% endif %}
							{% if 2<=loop.index<=5 %}
								<svg t="1588329338352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1118" width="20" height="20"><path d="M824.891164 113.777778V28.444444a28.444444 28.444444 0 0 0-28.444444-28.444444H227.557831a28.444444 28.444444 0 0 0-28.444444 28.444444v85.333334H0.002276v227.555555a256 256 0 0 0 232.96 256A312.888889 312.888889 0 0 0 455.113387 762.595556V910.222222l-113.777778 113.777778h341.333333l-113.777778-113.777778v-147.626666A312.888889 312.888889 0 0 0 791.042276 597.333333 256 256 0 0 0 1024.002276 341.333333V113.777778zM113.780053 341.333333V227.555556h85.333334v244.337777A142.222222 142.222222 0 0 1 113.780053 341.333333z m796.444445 0a142.222222 142.222222 0 0 1-85.333334 130.56V227.555556h85.333334z" p-id="1119" fill="#C0C0C0"></path></svg>
							{% endif %}
							{% if loop.index>=6 %}
								<svg t="1588329338352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1118" width="20" height="20"><path d="M824.891164 113.777778V28.444444a28.444444 28.444444 0 0 0-28.444444-28.444444H227.557831a28.444444 28.444444 0 0 0-28.444444 28.444444v85.333334H0.002276v227.555555a256 256 0 0 0 232.96 256A312.888889 312.888889 0 0 0 455.113387 762.595556V910.222222l-113.777778 113.777778h341.333333l-113.777778-113.777778v-147.626666A312.888889 312.888889 0 0 0 791.042276 597.333333 256 256 0 0 0 1024.002276 341.333333V113.777778zM113.780053 341.333333V227.555556h85.333334v244.337777A142.222222 142.222222 0 0 1 113.780053 341.333333z m796.444445 0a142.222222 142.222222 0 0 1-85.333334 130.56V227.555556h85.333334z" p-id="1119" fill="#B87333"></path></svg>
							{% endif %}
							#{{loop.index}}
						</td>
						<td>
							{{i.uid}}
						</td>
						<td>
							<a href="/user/{{i.uid}}">{{i.username}}</a>
						</td>
						<td>
							{{i.count}}
						</td>
						<td class="pohai" id="{{i.uid}}">
							迫害
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
			<p style="text-align: center;">如果看不全人名请鼠标悬浮在条上</p>
			<div id="main" style="width: 100%;height:600px;text-align:center;"></div>
			<script type="text/javascript">
		        var myChart = echarts.init(document.getElementById('main'));
		        var option = {
		            title: {
		                text: '可视化排行榜'
		            },
		            tooltip: {},
		            legend: {
		                data:['犇犇条数']
		            },
		            xAxis: {},
		            yAxis: 
		            {
		            	data:d.reverse()
		            },
		            series: [{
		                name: '犇犇条数',
		                type: 'bar',
		                data:x.reverse()
		            }]
		        };
		        myChart.setOption(option);
    		</script>
			<form method="POST">
	            {{ form.csrf_token }}
	            <div class="ui labeled input" style="text-align: center;">
					<div class="ui label">
						用户名:
					</div>
					<input id="username" name="username" required="" type="text" value="">
				</div>
	            <input class = "ui primary button" id="submit" name="submit" type="submit" value="查询">
	        </form>
	        <p style="text-align: center;">
				 输入UID可以同步最新的20条犇犇！
			</p>
	        <div class="ui labeled input" style="text-align: center;">
				<div class="ui label">
					uid:
				</div>
				<input type="text" placeholder="UID" id="uid">
			</div>
	        <button class="ui primary button" id="check">
				更新
			</button>
			<script type="text/javascript">
	        	$("#check").on('click',function(){
	        		$(this).attr("class", "ui primary loading button");
	        		$.get('/api/checkbenben?uid='+$('#uid').val(),function(data,status){
	        			if (status="success")
	        			{
	        				$('#check').attr("class", "ui primary button")
	        				if (data!=0)
	        				{
	        					$('#check').text("成功同步了今天的"+data+"条新消息")
	        				}
	        				else
	        				{
	        					$('#check').text("今天无新消息")
	        				}
	        				setTimeout(function(){
	        					$('#check').text("更新")
	        				},500)
	        			}
	        		})
	        	})
	        </script>
{% endblock body %}